<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Vue.js项目结构说明 | Jason&#39;s Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="Vue.js项目结构说明">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue.js项目结构说明">
<meta property="og:url" content="https://xianguoji.gitee.io/myblog/2017/01/12/2017-01-22-Vue.js%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E/index.html">
<meta property="og:site_name" content="Jason&#39;s Blog">
<meta property="og:description" content="Vue.js项目结构说明">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2017-01-11T16:00:00.000Z">
<meta property="article:modified_time" content="2020-08-12T06:46:13.543Z">
<meta property="article:author" content="Jason">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/myblog/" title="Jason&#39;s Blog" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/myblog/css/style.css">

<meta name="generator" content="Hexo 5.0.2"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/myblog/" id="logo">人与人的悲欢并不相通，孤独是生命的本质。</a>
      </h1>
      
        <h2 id="subtitle-wrap">
          <a href="/myblog/" id="subtitle">欢迎来到我的个人网站</a>
        </h2>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/myblog/">Home</a>
        
          <a class="main-nav-link" href="/myblog/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/myblog/" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="https://xianguoji.gitee.io/myblog"></form>
      </div>
    </div>
  </div>
</header>
<style>
  #logo{
    text-shadow:0 0 5px #000;
    /* font-weight: bold; */
  }
  #subtitle-wrap{
    margin-top: 50px;
  }
</style>
      <div class="outer">
        <section id="main"><article id="post-2017-01-22-Vue.js项目结构说明" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/myblog/2017/01/12/2017-01-22-Vue.js%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E/" class="article-date">
  <time datetime="2017-01-11T16:00:00.000Z" itemprop="datePublished">2017-01-12</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      Vue.js项目结构说明
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="简单介绍目录结构"><a href="#简单介绍目录结构" class="headerlink" title="简单介绍目录结构"></a>简单介绍目录结构</h3><p>build目录是一些webpack的文件，配置参数什么的，一般不用动 </p>
<p>config是vue项目的基本配置文件 </p>
<p>node_modules是项目中安装的依赖模块 </p>
<p>src源码文件夹，基本上文件都应该放在这里。 </p>
<p>—assets 资源文件夹，里面放一些静态资源 </p>
<p>—components这里放的都是各个组件文件 </p>
<p>—App.vue App.vue组件 </p>
<p>—main.js入口文件 </p>
<p>static生成好的文件会放在这个目录下。</p>
<p>test测试文件夹，测试都写在这里 </p>
<p>.babelrc babel编译参数，vue开发需要babel编译 </p>
<p>.editorconfig 看名字是编辑器配置文件，不晓得是哪款编辑器，没有使用过。 </p>
<p>.gitignore 用来过滤一些版本控制的文件，比如node_modules文件夹 </p>
<p>index.html 主页</p>
<p>package.json 项目文件，记载着一些命令和依赖还有简要的项目描述信息 </p>
<p>README.md 介绍自己这个项目的，想怎么写怎么写。不会写就参照github上star多的项目，看人家怎么写的</p>
<h3 id="详细介绍几个文件"><a href="#详细介绍几个文件" class="headerlink" title="详细介绍几个文件"></a>详细介绍几个文件</h3><h4 id="1-package-json"><a href="#1-package-json" class="headerlink" title="1.package.json"></a>1.package.json</h4><pre><code>&#123;
  &quot;name&quot;: &quot;demo&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;A Vue.js project&quot;,
  &quot;author&quot;: &quot;Luke.deng&quot;,
  &quot;private&quot;: true,
  &quot;scripts&quot;: &#123;
    &quot;dev&quot;: &quot;node build/dev-server.js&quot;,
    &quot;build&quot;: &quot;node build/build.js&quot;,
    &quot;e2e&quot;: &quot;node test/e2e/runner.js&quot;,
    &quot;test&quot;: &quot;npm run e2e&quot;
  &#125;,
  &quot;dependencies&quot;: &#123;
    &quot;vue&quot;: &quot;^2.1.0&quot;
  &#125;,
  &quot;devDependencies&quot;: &#123;
    &quot;autoprefixer&quot;: &quot;^6.4.0&quot;,
    &quot;babel-core&quot;: &quot;^6.0.0&quot;,
    &quot;babel-loader&quot;: &quot;^6.0.0&quot;,
    &quot;babel-plugin-transform-runtime&quot;: &quot;^6.0.0&quot;,
    &quot;babel-preset-es2015&quot;: &quot;^6.0.0&quot;,
    &quot;babel-preset-stage-2&quot;: &quot;^6.0.0&quot;,
    &quot;babel-register&quot;: &quot;^6.0.0&quot;,
    &quot;chalk&quot;: &quot;^1.1.3&quot;,
    &quot;connect-history-api-fallback&quot;: &quot;^1.1.0&quot;,
    &quot;css-loader&quot;: &quot;^0.25.0&quot;,
    &quot;eventsource-polyfill&quot;: &quot;^0.9.6&quot;,
    &quot;express&quot;: &quot;^4.13.3&quot;,
    &quot;extract-text-webpack-plugin&quot;: &quot;^1.0.1&quot;,
    &quot;file-loader&quot;: &quot;^0.9.0&quot;,
    &quot;function-bind&quot;: &quot;^1.0.2&quot;,
    &quot;html-webpack-plugin&quot;: &quot;^2.8.1&quot;,
    &quot;http-proxy-middleware&quot;: &quot;^0.17.2&quot;,
    &quot;json-loader&quot;: &quot;^0.5.4&quot;,
    &quot;chromedriver&quot;: &quot;^2.21.2&quot;,
    &quot;cross-spawn&quot;: &quot;^4.0.2&quot;,
    &quot;nightwatch&quot;: &quot;^0.9.8&quot;,
    &quot;selenium-server&quot;: &quot;2.53.1&quot;,
    &quot;semver&quot;: &quot;^5.3.0&quot;,
    &quot;opn&quot;: &quot;^4.0.2&quot;,
    &quot;ora&quot;: &quot;^0.3.0&quot;,
    &quot;shelljs&quot;: &quot;^0.7.4&quot;,
    &quot;url-loader&quot;: &quot;^0.5.7&quot;,
    &quot;vue-loader&quot;: &quot;^10.0.0&quot;,
    &quot;vue-style-loader&quot;: &quot;^1.0.0&quot;,
    &quot;vue-template-compiler&quot;: &quot;^2.1.0&quot;,
    &quot;webpack&quot;: &quot;^1.13.2&quot;,
    &quot;webpack-dev-middleware&quot;: &quot;^1.8.3&quot;,
    &quot;webpack-hot-middleware&quot;: &quot;^2.12.2&quot;,
    &quot;webpack-merge&quot;: &quot;^0.14.1&quot;
  &#125;,
  &quot;engines&quot;: &#123;
    &quot;node&quot;: &quot;&gt;= 4.0.0&quot;,
    &quot;npm&quot;: &quot;&gt;= 3.0.0&quot;
  &#125;
&#125;</code></pre>
<h3 id="package-json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下："><a href="#package-json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：" class="headerlink" title="package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下："></a>package.json文件是项目配置文件，除了项目的一些基本信息外，有3个重要的节点我说明一下：</h3><pre><code>dependencies：项目发布时的依赖
devDependencies：项目开发时的依赖
scripts：编译项目的一些命令</code></pre>
<h3 id="2-babelrc文件"><a href="#2-babelrc文件" class="headerlink" title="2. .babelrc文件"></a>2. .babelrc文件</h3><h4 id="babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。"><a href="#babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。" class="headerlink" title=".babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。"></a>.babelrc文件定义了ES6的转码规则，基于ES6编写的js代码在编译时都会被babel转码器转换为ES5代码。</h4><pre><code>&#123;
  &quot;presets&quot;: [&quot;es2015&quot;, &quot;stage-2&quot;],
  &quot;plugins&quot;: [&quot;transform-runtime&quot;],
  &quot;comments&quot;: false
&#125;</code></pre>
<h3 id="3-index-html"><a href="#3-index-html" class="headerlink" title="3.index.html"></a>3.index.html</h3><p>主页我们可以像平时普通的html文件一样引入文件和书写基本信息，添加meta标签等。</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta content=&quot;yes&quot; name=&quot;apple-mobile-web-app-capable&quot; /&gt;
    &lt;meta content=&quot;yes&quot; name=&quot;apple-touch-fullscreen&quot; /&gt;
    &lt;meta content=&quot;telephone=no,email=no&quot; name=&quot;format-detection&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;&gt;
    &lt;title&gt;华企商学院&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h3 id="4-main-js"><a href="#4-main-js" class="headerlink" title="4.main.js"></a>4.main.js</h3><p>这里是入口文件，可以引入一些插件或静态资源，当然引入之前要先安装了该插件，在package.json文件中有记录。</p>
<pre><code>/*引入Vue框架*/
import Vue from &#39;vue&#39;
/*引入资源请求插件*/
import VueResource from &#39;vue-resource&#39;
/*重置样式*/
import &quot;assets/css/base.css&quot;
/*基本JS*/
import &quot;assets/js/common.js&quot;
/*引入路由设置*/
import &quot;./routers.js&quot;
/*使用VueResource插件*/
Vue.use(VueResource)</code></pre>
<h3 id="5-App-vue"><a href="#5-App-vue" class="headerlink" title="5.App.vue"></a>5.App.vue</h3><p>这是一个标准的vue组件，包含三个部分，一个是模板，一个是script，一个是样式，这里需要了解vue的基础。</p>
<pre><code>&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;img src=&quot;./assets/logo.png&quot;&gt;
    &lt;hello&gt;&lt;/hello&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Hello from &#39;./components/Hello&#39;

export default &#123;
  name: &#39;app&#39;,
  components: &#123;
    Hello
  &#125;
&#125;
&lt;/script&gt;

&lt;style&gt;
#app &#123;
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
&#125;
&lt;/style&gt;</code></pre>
<h3 id="总结说明"><a href="#总结说明" class="headerlink" title="总结说明"></a>总结说明</h3><p>我不是随便拿官方的demo放在这里，我是想说明，在webpack的配置文件里，设置了main.js是入口文件，我们的项目默认访问index.html，<br>这个文件里面<div id="app"></div>和App.vue组件里面的容器完美的重合了，也就是把组件挂载到了index页面，然后我们只需要去建设其他组件就好了，<br>在App组件中我们也可以引入，注册，应用其他组件，后面我会介绍如何通过路由将其他组件渲染在App组件，这样我们就只需要去关注每个组件的功能完善。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="https://xianguoji.gitee.io/myblog/2017/01/12/2017-01-22-Vue.js%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84%E8%AF%B4%E6%98%8E/" data-id="ckds6fxa40009k8qcai2pda1j" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/myblog/2017/02/23/2017-02-23-%E7%BD%91%E7%AB%99%E4%B8%8A%E5%AE%9E%E7%8E%B0qq%E8%81%8A%E5%A4%A9%EF%BC%8C%E7%BD%91%E7%AB%99%E7%BB%91%E5%AE%9A%E5%BE%AE%E4%BF%A1%E7%99%BB%E5%BD%95/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          网站上实现qq聊天，网站绑定微信登录
        
      </div>
    </a>
  
  
    <a href="/myblog/2016/10/21/2016-11-21-40%E6%9D%A1%E5%B8%B8%E8%A7%81%E7%9A%84%E7%A7%BB%E5%8A%A8%E7%AB%AFWeb%E9%A1%B5%E9%9D%A2%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%20/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">40条常见的移动端Web页面问题解决方案</div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/javascript/" rel="tag">javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/js/" rel="tag">js</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/rem/" rel="tag">rem</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%85%B6%E4%BB%96/" rel="tag">其他</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" rel="tag">博客</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" rel="tag">性能优化</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E6%A1%86%E6%9E%B6/" rel="tag">框架</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" rel="tag">移动端</a></li><li class="tag-list-item"><a class="tag-list-link" href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" rel="tag">跨域请求</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/myblog/tags/javascript/" style="font-size: 20px;">javascript</a> <a href="/myblog/tags/js/" style="font-size: 10px;">js</a> <a href="/myblog/tags/rem/" style="font-size: 16.67px;">rem</a> <a href="/myblog/tags/%E5%85%B6%E4%BB%96/" style="font-size: 10px;">其他</a> <a href="/myblog/tags/%E5%8D%9A%E5%AE%A2/" style="font-size: 13.33px;">博客</a> <a href="/myblog/tags/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/" style="font-size: 13.33px;">性能优化</a> <a href="/myblog/tags/%E6%A1%86%E6%9E%B6/" style="font-size: 10px;">框架</a> <a href="/myblog/tags/%E7%A7%BB%E5%8A%A8%E7%AB%AF/" style="font-size: 13.33px;">移动端</a> <a href="/myblog/tags/%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82/" style="font-size: 10px;">跨域请求</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2020/08/">August 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/06/">June 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/05/">May 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/04/">April 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/03/">March 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/02/">February 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2017/01/">January 2017</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/10/">October 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/09/">September 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2016/08/">August 2016</a></li><li class="archive-list-item"><a class="archive-list-link" href="/myblog/archives/2015/08/">August 2015</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/myblog/2020/08/13/2020-08-13%E4%B8%AA%E4%BA%BA%E7%AE%80%E5%8E%86/">(no title)</a>
          </li>
        
          <li>
            <a href="/myblog/2017/06/18/2017-06-18-%E5%89%8D%E7%AB%AF%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E4%B8%80/">前端性能优化一</a>
          </li>
        
          <li>
            <a href="/myblog/2017/05/15/2017-05-15-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6-%E6%9B%B4%E6%96%B0/">调用百度地图插件-更新</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/23/2017-04-23-vue%E6%90%AD%E5%BB%BA%E9%A1%B9%E7%9B%AE/">vue搭建项目</a>
          </li>
        
          <li>
            <a href="/myblog/2017/04/21/2017-04-21-%E8%B0%83%E7%94%A8%E7%99%BE%E5%BA%A6%E5%9C%B0%E5%9B%BE%E6%8F%92%E4%BB%B6/">调用百度地图插件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2020 Jason<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/myblog/" class="mobile-nav-link">Home</a>
  
    <a href="/myblog/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/myblog/fancybox/jquery.fancybox.css">

  
<script src="/myblog/fancybox/jquery.fancybox.pack.js"></script>




<script src="/myblog/js/script.js"></script>




  </div>
</body>
</html>